<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>不规则文字环绕</title>
    <style>
        input{
            height: 23px;
        }
        input:invalid{
            animation: shake 0.2s ease-in-out 0s 2;
            box-shadow: 0 0 0.4em red;
            height: 23px;
        }
        @keyframes shake {
            0% { margin-left: 0rem; }
            25% { margin-left: 0.5rem; }
            75% { margin-left: -0.5rem; }
            100% { margin-left: 0rem; }
        }

        .overflow-ellipsis {
            width: 200px; /* 定义元素的宽度 */
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */
        }
    </style>
</head>

<body>
    <div>
        <input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
        <div class="overflow-ellipsis">文本如果超出容器会被截断并添加省略号</div>
    </div>
</body>
</html>